<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入样式 -->
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet"
          href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>评议计划</title>
    <style>
        .dia{
            width:1800px;
            margin-left:-80px;
        }
        .dial{
            width:1750px;
            margin-top:-100px;
            float:left;
        }
    </style>
    <div id="app">
        <h2>{{ message }}</h2>
    </div>
    <div id="tableView">
        <!--列表顶部搜索和工具条-->
        <el-row>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="searchForm.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addClick">新增</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!--列表顶部搜索和工具条  End-->
        <!--列表-->
        <el-row>
            <el-table
                    :data="tableData"
                    v-loading.body="loading"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index" label="序号"
                        header-align="center"
                        align="center"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="评议标题"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="begintime"
                        label="开始时间"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="endtime"
                        label="结束时间"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        width="350">
                    <template scope="scope">
                        <el-button type="primary" plain v-if="scope.row.state=='2'"  icon="el-icon-check"  @click="selectClick( scope.row)">查看</el-button>
                        <el-button type="success" plain v-if="scope.row.state=='1'"  icon="el-icon-edit"  @click="editClick( scope.row)">编辑</el-button>
                        <el-button type="danger" plain v-if="scope.row.state=='1'"  icon="el-icon-delete" @click="deleteClick( scope.row)">删除</el-button>
                        <el-button type="primary" plain v-if="scope.row.state=='1'"  icon="el-icon-upload2" @click="upClick( scope.row)">提交计划</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--列表  End-->
        <!--列表底部工具条和分页符-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
            <!-- <el-col :span="6" >
                <el-button :plain="true" type="danger"  icon="delete" @click="removeSelection">删除所选</el-button>
            </el-col> -->
            <el-col :span="18" >
                <el-pagination
                        style="float: right"
                        @size-change="pageSizeChange"
                        @current-change="currentPageChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 底部工具栏  End-->

        <!--新增列表    -->
        <el-dialog title="新增评议信息..." :visible.sync="editFormVisible" :close-on-click-modal="false" class="dia">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="评议标题" prop="title">
                    <el-input v-model="editForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="begintime">
                    <el-date-picker
                            v-model="editForm.begintime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期"
                            :picker-options="pickerOptions0"
                            @change="changeTime" >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="endtime">
                    <el-date-picker class=""
                                    v-model="editForm.endtime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="结束日期"
                                    :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
                <el-button type="success" icon="el-icon-plus" @click="addClick1" round>选择评议人员</el-button><br>
                <label><label style="color:red">*</label>评议人员</label><br/>
                <!--列表-->
                <el-row>
                    <el-table
                            :data="getDatas"
                            v-loading.body="loading"
                            stripe

                            style="width: 100%">
                        <el-table-column
                                type="index" label="序号"
                                header-align="center"
                                align="center"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                align="center"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                prop="tname"
                                label="所属类型"
                                align="center"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                width="250">
                            <template scope="scope">
                                <el-button :plain="true" type="danger"  icon="el-icon-minus" @click="removeClick(scope.row)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--新增结束-->
        <!--添加时候选择评议人员界面-->
        <el-dialog title="评议人员信息" :visible.sync="editFormVisible1" :close-on-click-modal="false" class="dial">
            <!--列表-->
            <el-row>
                <el-table
                        :data="getData"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            type="index" label="序号"
                            header-align="center"
                            align="center"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="tname"
                            label="所属类型"
                            align="center"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="250">
                        <template scope="scope">
                            <el-button :plain="true" type="success" icon="el-icon-plus" @click="checkClick(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div slot="footer" style="margin-right:400px;">
                <el-button  @click.native="editFormVisible1 = false" @click="resetForm1('editForm')">关闭</el-button>
            </div>
        </el-dialog>
        <!--添加时候选择评议人员界面  End-->
       <!-- <编辑计划页面>-->
        <el-dialog title="编辑评议信息..." :visible.sync="editFormVisible2" :close-on-click-modal="false" class="dia">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="评议标题" prop="title" :disabled="a">
                    <el-input v-model="editForm.title" auto-complete="off" :disabled="a" ></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="begintime"  >
                    <el-date-picker
                            :disabled="a"
                            v-model="editForm.begintime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期"
                            :picker-options="pickerOptions0"
                            @change="changeTime" >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="endtime" :disabled="a" >
                    <el-date-picker class=""
                                    :disabled="a"
                                    v-model="editForm.endtime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="结束日期"
                                    :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-button type="success" icon="el-icon-plus" @click="addClick2" round>选择评议人员</el-button><br> -->
                <label><label style="color:red">*</label>评议人员</label><br/>
                <!--列表-->
                <el-row>
                    <el-table
                            :data="datass"
                            v-loading.body="loading"
                            stripe
                            style="width: 100%">
                        </el-table-column>
                        <el-table-column
                                type="index" label="序号"
                                header-align="center"
                                align="center"
                                width="66">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                align="center"
                                width="170">
                        </el-table-column>
                        <el-table-column
                                prop="pnumber"
                                label="电话"
                                align="center"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                label="邮箱"
                                align="center"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="tname"
                                label="所属类型"
                                align="center"
                                width="200">
                        </el-table-column>
                    </el-table>
                </el-row>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible2 = false" @click="resetForm('editForm')" >取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading" :disabled="a" >提交</el-button>
            </div>
        </el-dialog>
        <!-- <编辑计划页面>-->

    </div>
</head>
<body>
    <script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data: {
                message: '评议计划',
            }
            })
        var table=new  Vue({
                el:'#tableView',
                    data:{
                    //评议计划表格
                        tableData:[],
                     //评议人员表单
                        getData:[],
                        //是否允许编辑
                        a:true,
                        //移除人员表单
                        getDatas:[],
                        //编辑人员数据
                        datass:[],
                        editLoading: false,
                        //隐藏表单
                        editFormVisible:false,
                        editFormVisible1:false,
                        editFormVisible2:false,
                        //当前页
                        currentPage:1,
                        //分页大小
                        pageSize:5,
                        //总记录数
                        total:800,
                        //显示加载中样式
                        loading:false,
                        //头部搜索表单
                        searchForm: {
                            title: '',
                        },
                        //计划添加表单
                        editForm: {
                            id: '',
                            title: '',
                            begintime: '',
                            endtime: '',
                            state:''
                        },
                        editFormRules: {
                            title: [
                                { required: true, message: '请输入标题', trigger: 'blur' }
                            ],
                            begintime: [
                                { required: true, message: '请输入开始时间', trigger: 'blur' }
                            ],
                            endtime: [
                                { required: true, message: '请输入结束时间', trigger: 'blur' }
                            ]
                        },
                        //时间判断
                        begintime:'',
                        endtime:'',
                        //开始时间
                        pickerOptions0: {
                            disabledDate: (time) => {
                                if (this.endtime != "") {
                                    return time.getTime() < Date.now() - 8.64e7 || time.getTime() < this.endtime;
                                } else {
                                    return time.getTime() < Date.now() - 8.64e7;
                                }
                            }
                        },
                        //结束时间
                        pickerOptions1: {
                            disabledDate: (time) => {
                                return time.getTime() > this.begintime || time.getTime() < Date.now();
                            }
                        },

                },

        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.pageSize;
            axios.post('/setting/list',{'start':start,'pageSize':end}).then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;
                self.getData = response.data.person;
                self.getDatas=response.data.insertxid;
                // self.multipleSelection=response.data.data;
            })
        },

            methods:{
                loadingData:function(){
                    var self = this;
                    var start =(this.currentPage-1)*this.pageSize;
                    var end =this.pageSize;
                    var sFrom={'start':start,'pageSize':end,'title':this.searchForm.title}
                    axios.post('/setting/list',sFrom).then(function (response) {
                        self.tableData=response.data.data;
                        self.total=response.data.total;
                        self.getData = response.data.person;
                        self.getDatas=response.data.insertxid;
                    })
                    },
                //查询
                searchClick:function() {
                    var self = this;
                    self.loadingData();//重新加载数据
                },
                //分页大小修改事件
                pageSizeChange:function(val) {
                    console.log('每页 ' + val +' 条');
                    this.pageSize = val;
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                //当前页修改事件
                currentPageChange:function(val) {
                    this.currentPage = val;
                    console.log('当前页: ' + val);
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                //新建事件
                addClick:function() {
                    this.editForm={
                        id: '',
                        title: '',
                        begintime: '',
                        endtime: '',
                        pstate:'',
                        state: '1',
                    };
                    //alert(111);
                    this.goUrl="/setting/insert";
                    var _self = this;
                    this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                    _self.loadingData();//重新加载数据
                },
                //新增时候选择评议人员
                addClick1:function() {
                    this.editFormVisible1 = true;//弹出层，让隐藏的弹出层显示
                },
                //选择编辑事件
                checkClick:function(row) {
                    var _self = this;
                    var  url="/setting/upd/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:'选择成功',
                                type: 'success'
                            });
                        }
                        _self.loadingData();//重新加载数据
                    });
                },
                //移除人员
                removeClick:function(row) {
                    var _self = this;
                    var  url="/setting/updxid/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:'移除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                },
                //移除人员 End
                //取消事件
                resetForm:function(editForm) {
                    this.$refs[editForm].resetFields();
                },
                //判断结束时间肖于开始时间的事件
                changeTime(date){
                    tableView.endtime="";
                    this.pickerOptions1={
                        disabledDate(time) {
                            //开始时间-结束时间
                            return (time.getTime() < new Date(date).getTime());
                        }
                    }
                },
                //表格编辑事件
                editClick:function(row) {
                    this.a=false;
                    //this.id = row.id;
                    var self=this;
                    var zid=row.pstate;
                    //alert(zid);
                   var check={'pstate':zid};
                    axios.post('/setting/selectId',check).then(function(response){
                        self.datass=response.data.datass;
                    });
                    this.goUrl="/setting/update";
                    this.editFormVisible2 = true;
                    this.editForm = Object.assign({},row);
                },
                selectClick:function(row){
                    //this.id = row.id;
                    var self=this;
                    var zid=row.pstate;
                    //alert(zid);
                    var check={'pstate':zid};
                    axios.post('/setting/selectId',check).then(function(response){
                        self.datass=response.data.datass;
                    });
                    this.goUrl="/set/update";
                    this.editFormVisible2 = true;
                    this.editForm = Object.assign({},row);
                },


                 //删除计划
                deleteClick:function(row){
                    var self=this;
                    axios.post('/setting/del/'+row.id).then(function (response) {
                        if(response.data>0){
                            self.$message({
                                message:'删除成功',
                                type: 'success'
                            });
                            self.loadingData();//重新加载数据
                        }
                    })
                },
                //删除计划  End
                //提交计划
                upClick:function(row){
                  var self=this;
                  axios.post("/setting/ups/"+row.id).then(function (response) {
                      if (response.data>0){
                          self.$message({
                              message:'提交成功',
                              type: 'success'
                          });
                          self.loadingData();//重新加载数据
                      }
                  })
                },
                //提交计划

                // 提交时间
                editSubmit:function(editForm){
                    this.$refs[editForm].validate((valid) => {
                        if (valid) {
                            var _self = this;
                            var formData =this.editForm;
                            var goUrl=this.goUrl;
                            //alert(JSON.stringify(formData));
                            axios.post(goUrl,formData).then(function(response){
                                if(response.data>0){
                                    _self.editFormVisible = false;// 让弹出层隐藏
                                    _self.editFormVisible2 = false;// 让弹出层隐藏
                                    //重新加载数据
                                    _self.loadingData();//重新加载数据
                                }
                            })
                            console.info(this.editForm);
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    })
                },
            }
        })
    </script>
</body>
</html>